﻿<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/17-content-code/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/17-content-code/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/17-content-code/coda-slider.1.1.1.pack.js"></script>
<script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/n17-content-slider/n17-content-slider-025.js" type="text/javascript"></script>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style type="text/css">
.floatLeft { float: left; margin-right: 10px;}
.floatRight { float: right; }
.clear { clear: both; }
a { outline: none; }
#page-wrap { width: 500px; margin: 25px auto; position: relative; min-height: 500px; background: url(http://1.bp.blogspot.com/-CY6uJ5Xetwk/UiTHvQE_JyI/AAAAAAAABO0/xko-yT1OuJQ/s1600/bg.png) top center; }
ul { list-style: square inside; }
a, a:visited { color: #729dff; text-decoration: none; }
a:hover, a:active { color: white; }
blockquote { padding: 0 20px; margin-left: 20px; border-left: 20px solid #ccc; font-size: 14px; font-family: Georgia, serif; font-style: italic; margin-top: 10px;}
.slider-wrap { width: 419px; position: absolute; top: 87px; left: 40px; }			
.stripViewer .panelContainer 
.panel ul { text-align: left; margin: 0 15px 0 30px; }
.stripViewer { position: relative; overflow: hidden; width: 419px; height: 285px; }
.stripViewer .panelContainer { position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 419px; }
.stripNavL, .stripNavR, .stripNav { display: none; }
.nav-thumb { border: 1px solid black; margin-right: 5px; }
#movers-row { margin: -43px 0 0 62px; }
#movers-row div { width: 20%; float: left; }
#movers-row div a.cross-link { float: right; }
.photo-meta-data { background: url(http://1.bp.blogspot.com/-bSX-ebJkgo4/UiTHvrHx75I/AAAAAAAABO4/_K4ZmrxpU1o/s1600/transpBlack.png); padding: 10px; height: 30px; margin-top: -50px; position: relative; z-index: 100; color: white; }
.photo-meta-data span { font-size: 13px; }
.cross-link { display: block; width: 62px; margin-top: -14px; position: relative; padding-top: 15px; z-index: 100; }
.active-thumb { background: transparent url(http://1.bp.blogspot.com/-0UGJVCx1y1I/UiTHvT1ctoI/AAAAAAAABO8/gcwFryRcnWM/s1600/icon-uparrowsmallwhite.png) top center no-repeat; }
--------------------------------------------------------------------
Awesome Automatic Content Sliders for Blogger using jQuery

--------------------------------------------------------------------
Featured Content Slider
*/

</style>



<h3>» Awesome Automatic Content Slider for Blogger using jQuery</h3>


<div style="float:left;">
<div id="page-wrap">
											
	<div class="slider-wrap">
		<div id="main-photo-slider" class="csw">
			<div class="panelContainer">

				<div class="panel" title="Panel 1">
					<div class="wrapper">
						<img alt="How to change mouse cursor in blogger blog to animated cursors" width="419" src="http://2.bp.blogspot.com/-K_2wwgsZkWw/Uhnj7LRRGGI/AAAAAAAABIM/c-I2AEoZZnk/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" height="282"/>
						<div class="photo-meta-data">
							<a href="http://24work.blogspot.com/2012/01/how-to-change-mouse-cursor-in-blogger.html" target="_blank">How to change mouse cursor in blogger blog to animated cursors</a><br />
							<span>How to change mouse cursor in blogger blog to animated cursors.One of the best way to add extra fun to your ....<a href="#">read more</a></span>
						</div>
					</div>
				</div>
				<div class="panel" title="Panel 2">
					<div class="wrapper">
						<img alt="Numbered Page Navigation For Blogger New Script" width="419" src="http://2.bp.blogspot.com/-PlV205zDJXI/Uhnm1ZN1W2I/AAAAAAAABIg/nw5gu9LTvIA/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" height="282"/>
						<div class="photo-meta-data">
							<a href="http://24work.blogspot.com/2012/01/numbered-page-navigation-for-blogger.html" target="_blank">Numbered Page Navigation For Blogger New Script</a><br />
							<span>Today we will see how to add a nice page number navigation hack blogger. The default navigation links (i.e Older Posts) is not the friendly visitor</span>
						</div>
					</div>
				</div>		
				<div class="panel" title="Panel 3">
					<div class="wrapper">
						<img alt="How To Add Snow Effect On The Blogger Mouse Cursor Area" width="419" src="http://1.bp.blogspot.com/-M0EQDInUmnA/UhnoxhiOzPI/AAAAAAAABIs/BP1BBPF9NdE/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" height="282"/>
						<div class="photo-meta-data">
							<a href="http://24work.blogspot.com/2011/12/how-to-add-snow-effect-on-blogger-mouse.html" target="_blank">How To Add Snow Effect On The Blogger Mouse Cursor Area</a><br />
							<span>How to change mouse cursor in blogger blog to animated cursors.One of the best way to add extra fun to your blog is, changing mouse cursor on your blog.</span>
						</div>
					</div>
				</div>
				<div class="panel" title="Panel 4">
					<div class="wrapper">
						<img alt="Falling Objects / Falling Text / Marquee Scrolling Text Generator for Blogger" width="419" src="http://1.bp.blogspot.com/-RkVjrr2ep3Q/UhnqZIfLhII/AAAAAAAABI4/5dxe7L1Hgfw/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" height="282"/>
						<div class="photo-meta-data">
							<a href="http://24work.blogspot.com/2012/01/falling-objects-falling-text-marquee.html" target="_blank">Falling Objects / Falling Text / Marquee Scrolling Text Generator for Blogger</a><br />
							<span>You can show the falling objects or graphics to your Blogger profile page. This generator falling objects to specify an image of your choice.</span>
						</div>
					</div>
				</div>
				<div class="panel" title="Panel 5">
					<div class="wrapper">
						<img alt="How To Add Animated Flash Clock To Your Blogger Blog" width="419" src="http://4.bp.blogspot.com/-XMxYEw2NibM/UhozkOB-YXI/AAAAAAAABJI/N6uGRQTwrXQ/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" height="282"/>
						<div class="photo-meta-data">
							<a href="http://24work.blogspot.com/2011/12/how-to-add-animated-flash-clock-to-your.html" target="_blank">How To Add Animated Flash Clock To Your Blogger Blog</a><br />
							<span>Hello! `How are you guys? here"s the cool Clock.this tutorial will show you how to Add animated flash clock gadget your Blogger blog.</span>
						</div>
					</div>
				</div>
				<div class="panel" title="Panel 6">
					<div class="wrapper">
						<h1>About</h1>
						<blockquote>24work is a blog about Professional Blogger Tutorials, Free Backlinks, Free templates, Resources, Tools, CSS, HTML Tutorials, Tips, Tricks, and General tutorials. Visit Us <a href="http://24work.blogspot.com/" target="_blank">http://24work.blogspot.com/</a></blockquote>
					<p><em>Contact Info    <a href="https://www.facebook.com/24work" target="_blank">https://www.facebook.com/24work</a><br /></em></p>
                                            </div>
				</div>

			</div>
		</div>

		<a href="#1" class="cross-link active-thumb"><img src="http://1.bp.blogspot.com/-cC64dAD9x2c/UiTOm1Ho7qI/AAAAAAAABPU/fQfu2jZOdLE/s1600/Change+Mouse+Cursor+Generator.gif" class="nav-thumb" alt="temp-thumb" /></a>
		<div id="movers-row">
			<div><a href="#2" class="cross-link"><img src="http://2.bp.blogspot.com/-meCmeCvz7wU/UiTPXoJqMAI/AAAAAAAABPc/6DdWFFiGQsk/s1600/Numbered+Page+Navigation.gif" class="nav-thumb" alt="temp-thumb" /></a></div>
			<div><a href="#3" class="cross-link"><img src="http://2.bp.blogspot.com/-8dlPU_Be2ak/UiTQD6XjnSI/AAAAAAAABPk/43BYhE9RQWo/s1600/Snow+Cursor+Code+Generatort.gif" class="nav-thumb" alt="temp-thumb" /></a></div>
			<div><a href="#4" class="cross-link"><img src="http://2.bp.blogspot.com/-KFbXYiSAliM/UiTQhlGf03I/AAAAAAAABPs/OizWP8UMBkk/s1600/Blogger+Falling+Object+Generator.gif" class="nav-thumb" alt="temp-thumb" /></a></div>
			<div><a href="#5" class="cross-link"><img src="http://2.bp.blogspot.com/-ix8MGhVby3M/UiTQ92AXdnI/AAAAAAAABP0/RRIuIcsckyU/s1600/Animated+Flash+Clock.gif" class="nav-thumb" alt="temp-thumb" /></a></div>
			<div><a href="#6" class="cross-link"><img src="http://4.bp.blogspot.com/-We17uVptcTY/UiTSNi2L4XI/AAAAAAAABP8/rUA4uh7PWOU/s1600/no+pic.gif" class="nav-thumb" alt="temp-thumb" /></a></div>
		</div>

	</div>
	
	</div>